import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { Debt } from "../../const/imgs";
import { imgTest } from '../../const/datas'
import { hands } from '../../service/TaskService'
import { getTOKEN,getInfo } from '../../utils/StorageUtil'
import { NOTASK } from '../components/Default'
import ProgressView from "../../view/ProgressView";

class Hands extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      Hands: [],
      loading: false
    }
  }
  componentDidMount() {
    document.title = '手别'
    this.setState({ loading: true });
    hands({
      token: getTOKEN(),
      case_id:  this.props.TaskData?this.props.TaskData.case_info.case_id:getInfo('TaskInfo').case_info.case_id,
    }) 
      .then(
        res => {
    this.setState({ loading: false });
    this.setState({
            Hands: res.data.data
          })
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }} >
        <div className={styles['debt_item']} style={{ color: Config.fontColor }} >
          {this.state.Hands.length === 0 && <NOTASK />}

          {this.state.Hands.length >0 &&<div className={styles['debt_data']}>
            <div className={styles['debt_data_list']} style={{ lineHeight: '36px' }} >
              {
                this.state.Hands.map((item, index) => {
                  return (
                    <CaseItem key={index} src={imgTest[0].imgurl} name='张三' value='2015-05-08' />
                  )
                })
              }
            </div>
          </div>}
        </div>
      <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />        
        
      </div>
    )
  }
}
const CaseItem = ({ name, value, src }) => {
  return (

    <div className={styles['debt_data_method']} style={{ height: LINEHEIGHT }}>
      <span className={styles['debt_value']} style={{ display: 'flex', alignItems: 'center' }} >
        <div style={avatarStyle} >
          <img src={src} style={avatarImgStyle} />
        </div>

        {name}

      </span>
      <span className={styles['debt_key']}> {value}</span>
    </div>
  )
}
const LINEHEIGHT = '56px'
const AVATARHEIGHT = '40px'
const avatarStyle = {
  width: AVATARHEIGHT,
  height: AVATARHEIGHT,
  borderRadius: '50%',
  marginRight: '10px',
  overflow: 'hidden'
}
const avatarImgStyle = {
  width: AVATARHEIGHT
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Hands);